<template>
  <div class="app-container">
    <!-- 操作区域 -->
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <!-- 单独补发 -->
      <el-tab-pane name="operationSingle">
        <template #label>
          <div class="custom-tabs-label">
            <SvgIcon icon="edit" size="13" style="margin-right: 5px;"></SvgIcon>
            <span>资金操作</span>
          </div>
        </template>
        <OperationSingle :operate-type="operateType" @change="handleChangeUserId" @refresh="handleRefreshListData"/>
      </el-tab-pane>
    </el-tabs>

    <!-- 补发记录 -->
    <OperationLog ref="operationLogRef" :userId="userId"/>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue';
import OperationSingle from '@/views/finance/admin-recharge/operation-single.vue';
import OperationLog from '@/views/finance/admin-recharge/operation-log.vue';
import { SvgIcon } from '@/components/icon';
import { rechargeAdminConfig } from '@/api/api-finance.ts';

defineOptions({name: 'admin-recharge'});

const activeName = ref('operationSingle');

/** 处理Tab改变事件 */
const handleTabClick = () => {

}

onMounted(() => {
  initConfig();
});

/** 初始化配置 */
const operateType = ref(0);
const initConfig = () => {
  rechargeAdminConfig().then((response) => {
    operateType.value = response.data.operate_type || 0;
  })
};

const userId = ref<any>();
const operationLogRef = ref<any>();
const handleChangeUserId = (val: any) => {
  userId.value = val;
  nextTick(() => {
    operationLogRef.value?.handleSearch();
  });
};

/** 刷新列表数据 */
const handleRefreshListData = () => operationLogRef.value?.handleSearch();
</script>

<style lang="scss" scoped>

</style>
